<template>
	<view>
		<view class="com-icon-title">
			<view class="com-icon-titleLeft">
				<template v-if="isIcon">
					<!-- <view class="com-titleicon"></view> -->
					<view class="com-icon-titleView" @click="$emit('clickIcon')">
						<view class="com-title-desc1" :style="{color:color}">{{comTitle}}</view>
						<u-icon name="arrow-down" size="20" style="margin-left: 20rpx;"></u-icon>
					</view>
				</template>
				<template v-if="desc">
					<!-- <view class="com-titleicon"></view> -->
					<slot></slot>
					<view class="com-icon-titleView">
						<view class="com-title-desc" :style="{color:color}">{{comTitle}}</view>
						<view class="com-title-desc">{{decsTitle}} {{decsVlaue}}</view>
					</view>
				</template>
			</view>
			<view class="com-icon-titleright" v-if="rightIocn" @click="$emit('click')">
				<slot name="rightImage"></slot>
				<view class="com-icon-titleright1">
					{{rightTitle}}
				</view>
				<!-- <u-icon name="arrow-right" size="20"></u-icon> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			// 标题
			comTitle:String,
			// 是否是有图标
			isIcon:Boolean,
			// 是否是副标题
			desc:{
				type:Boolean,
				default:false
			},
			// 副标题
			decsTitle:String,
			decsVlaue:[String,Number],
			// 右侧图标
			rightIocn:{
				type:Boolean,
				default:false
			},
			// 右侧标题
			rightTitle:[String,Number],
			color:{
				type:String,
				default:'#ffffff'
			}
		},
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="scss">
	.com-icon-titleView{
		display: flex;
		align-items: center;
	}
	.com-icon-title{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		.com-icon-titleLeft{
			display: flex;
			align-items: center;
			.com-titleicon{
				width: 4px;
				height: 10px;
				border-radius: 24rpx;
				background: #F37F02;
			}
			.com-title-desc{
				font-size: 13px;
				margin-left: 20rpx;
				// font-weight: 100;
			}
			.com-333{
				color: #333333;
			}
			.com-fff{
				color: #ffffff;
			}
			.com-title-desc1{
				font-size: 13px;
				margin-left: 20rpx;
			}
		}
		.com-icon-titleright{
			display: flex;
			align-items: center;
			.com-icon-titleright1{
				font-size: 24px;
				// font-weight: bold;
				letter-spacing: 1px;
				color: #666666;
				margin-right: 20rpx;
			}
		}
	}
</style>